<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LeafletJS加载高德地图 - 优吉斯(YouGIS)</title>
    <link href="../lib/leaflet/leaflet.css" rel="stylesheet" />
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/leaflet/leaflet.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      #location {
        position: fixed;
        padding: 5px;
        left: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 999;
        font-size: 12px;
        font-weight: bold;
        color: blue;
        border-top-right-radius: 5px;
        /* width: 255px; */
      }

      #mapdiv {
        width: 100vw;
        height: calc(100vh - 156px);
      }

      #promptInfo {
        z-index: 999;
        position: absolute;
        color: red;
        font-size: large;
        font-weight: bold;
        margin-left: 80px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <iframe src="../yougis.html" style="width: 100vw; height: 156px"></iframe>
    <div id="mapdiv">
        <div id="promptInfo"></div>
    </div>
    <div id="location"></div>
    <script>
      L.tileLayer.amap = function (option) {
        option = option || {};
        var layer;
        var subdomains = "1234";
        switch (option.layer) {
          //单图层-矢量图
          case "vec":
          default:
            layer = L.tileLayer(
              "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
              {
                name: option.name,
                subdomains: subdomains,
              }
            );
            break;
          // 单图层-影像图
          case "img_d":
            layer = L.tileLayer(
              "http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
              {
                name: option.name,
                subdomains: subdomains,
              }
            );
            break;
          // 单图层-影像注记
          case "img_z":
            layer = L.tileLayer(
              "http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
              {
                name: option.name,
                subdomains: subdomains,
              }
            );
            break;
          //图层叠加-影像图(含注记)
          case "img":
            layer = L.layerGroup([
              L.tileLayer.amap({
                name: "底图",
                layer: "img_d"
              }),
              L.tileLayer.amap({
                name: "注记",
                layer: "img_z"
              }),
            ]);
            break;
            //实时路况
            case "time": 
            var time = new Date().getTime();
            layer = L.tileLayer(
              "http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x={x}&y={y}&z={z}&&t=" + time,
              {
                name: option.name,
              }
            );
            break;
        }
        return layer;
      };

      let vec = new L.tileLayer.amap({ layer: "vec", name: "矢量图" });
      let img_d = new L.tileLayer.amap({ layer: "img_d", name: "影像图"  });
      let img_z = new L.tileLayer.amap({ layer: "img_z", name: "影像注记"  });
      let img = new L.tileLayer.amap({ layer: "img", name: "影像图(含注记)"  });
      let time = new L.tileLayer.amap({ layer: "time", name: "实时路况"  });

      $(document).ready(function () {
        var options = {
          center: [31.24, 121.50],
          zoom: 15, // initial zoom of map
          layers: [vec],
        };
        var map = L.map("mapdiv", options);
        L.marker([31.24, 121.50])
          .addTo(map)
          .bindTooltip("上海东方明珠")
          .openTooltip();

        const baseLayers = {
          矢量图: vec,
          影像图: img_d,
          影像注记: img_z,
          "影像图(含注记)": img,
          实时路况: time,
        };

        // 添加图层控制控件
        L.control.layers(baseLayers).addTo(map);

        // 设置初始显示内容
        let initInfo = "请通过右上角图层控制切换地图, 点击地图左下角展示坐标<br/>";
        initInfo += "当前选择地图：" + vec.options.name + "<br/>";
        initInfo += "服务地址：" + vec._url;
        document.getElementById("promptInfo").innerHTML = initInfo;
        
        // 图层切换事件, 设置显示的提示信息
        map.on('baselayerchange', function(e) {
            let info = "请通过右上角图层控制切换地图, 点击地图左下角展示坐标<br/>";
            info += "当前选择地图：" + e.name + "<br/>";
            if (e.layer._url) {
                info += "服务地址：" + e.layer._url; 
            } else if (e.layer._layers) {
                for (k in e.layer._layers) {
                    let v = e.layer._layers[k]
                    info += "服务地址" + k + "：" + v._url + "<br/>"; 
                }
            }
            document.getElementById("promptInfo").innerHTML = info;
        });

        map.on("click", (e) => {
          let lnglat = "鼠标点击位置坐标：" + e.latlng.lng + " , " + e.latlng.lat;
          $("#location")[0].innerText = lnglat;
        });
        window.map = map;
      });
    </script>
  </body>
</html>
